<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '礼物交易',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="22px"></wd-icon>
    </view>
    <!-- 顶部用户信息区域 -->
    <view class="header">
      <view class="user-info">
        <view class="user-info-left">
          <HeaderTip />
        </view>
      </view>
    </view>

    <!-- 资源展示区域 -->
    <Resource :resource="resource" />
    <view class="code-exchange-container">
      <!-- 标题 -->
      <view class="title-container">
        <view class="title-line"></view>
        <view class="trade-title">礼物交易</view>
        <view class="title-line"></view>
      </view>
      <view class="trade-tips">
        <view class="text">该功能暂未正式对外提供服务，敬请期待。</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HeaderTip from '@/components/Header/index.vue'
import Resource from '@/components/resource/index.vue'
const resource = ref({
  blue: 200000,
  blue1: 10000,
  red: 200000,
  red1: 10000,
  gold: 200000,
  gold1: 10000,
})
const code = ref('')
// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  .header {
    padding: 20rpx 0;
    position: relative;
    z-index: 10;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .top-buttons {
      display: flex;
      gap: 30rpx;

      .top-btn {
        font-size: 44rpx;
        color: #fff;
        text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.6);
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}
// 能量交易容器
.code-exchange-container {
  padding: 40rpx 0 0 0;

  // 标题容器
  .title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  // 标题线条
  .title-line {
    flex: 1;
    height: 2rpx;
    background: #00ffff;
    margin: 0 20rpx;
  }

  // 标题样式
  .trade-title {
    font-size: 48rpx;
    color: #fff;
  }
  .trade-tips {
    margin: 30rpx;
    height: 500rpx;
    border: 2rpx solid #00ffff;
    border-radius: 15rpx;
    padding: 0 40rpx;
  }
  .text {
    font-size: 40rpx;
    color: #fff;
    margin-top: 150rpx;
  }
}
</style>
